<template>
    <div>
        <div slot="tip" class="panel panel-default panel-search">
            <el-form :inline="true">
                <el-row>
                    <el-form-item label="周期" prop="periodId">
                        <period-select
                            :fnChange="buildDataRanges"
                            ref="periodSelect"
                            v-model="page.query.param.periodId"
                            :clearable="true"
                        ></period-select>
                    </el-form-item>
                    <el-form-item label="日期">
                        <el-date-picker
                            style="width: 305px"
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <!--<el-form-item label="班次类型" prop="classType">
                                  <el-select :clearable="true" v-model="page.query.param.classType" style="width:160px" @change="search">
                                      <el-option v-for="item in $dongxwDict.store.CLASS_TYPES" :key="item[0]" :value="item[0]"
                                                 :label="item[1]"></el-option>
                                  </el-select>
                              </el-form-item> -->

                    <el-form-item label="来源类型" prop="sourceType">
                        <el-select style="width: 100%" v-model="page.query.param.sourceType" @change="search">
                            <el-option :key="10" :value="10" :label="'10--打卡'"></el-option>
                            <el-option :key="20" :value="20" :label="'20--补卡'"></el-option>
                            <el-option :key="30" :value="30" :label="'30--倒入'"></el-option>
                            <el-option
                                :key="40"
                                :value="40"
                                :label="'40--模拟卡'"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="部门" prop="departmentId">
                        <department-select
                            :fnChange="search"
                            v-model="page.query.param.departmentId"
                            :clearable="true"></department-select>
                    </el-form-item>
                    <el-form-item label="员工" prop="employeeId">
                        <employee-select
                            :fnChange="search"
                            v-model="page.query.param.employeeId"
                            :departmentId="page.query.param.departmentId"
                            :clearable="true"></employee-select>
                        <el-button type="primary" plain @click="findEmployee"
                        >选择员工
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" v-keycode="'ENTER'"
                        >查询
                        </el-button
                        >
                        <el-button @click="cancel">取消</el-button>
                        <!--<el-button plain @click="exportRecords">导出XLS</el-button>-->

                        <el-button type="primary" plain @click="create">

                            <span style="color: blue">补卡</span>

                        </el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <!--<v-toolbar type="alert" style="margin-left:-5px">-->
        <!--&lt;!&ndash;<el-button slot='tip' type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button plain @click="exportRecords">导出 XLS</el-button>&ndash;&gt;-->
        <!--</v-toolbar>-->
        <div width="50%">
            <!--:click="clickRow"-->

            <v-table
                ref="table"
                :dblclick="edit"
                :page="page"
                :table-minheight="450"
                @dataloaded="onDataloaded"
            >
                <!-- <el-table-column
                  prop="status"
                  :sortable="true"
                  label="状态"
                  width="120"
                >
                  <template slot-scope="{ row }">
                    {{ DICT.STATUS[row.status] }}
                  </template>
                </el-table-column> -->
                <el-table-column
                    prop="department"
                    :sortable="true"
                    label="部门"
                    width="111"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.department.name }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="workID"
                    :sortable="true"
                    label="工号"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.workID }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    :sortable="true"
                    label="员工"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.name }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cardDay"
                    :sortable="true"
                    label="打卡日期"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ $dongxwDict.viewDate(row.cardDay) }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="week" :sortable="true" label="星期" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.week }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cardTime"
                    :sortable="true"
                    label="打卡时间"
                    width="133"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.cardTime }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sCard" :sortable="true" label="补卡" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sourceType == 20 ? row.sCard : '-' }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sourceType"
                    :sortable="true"
                    label="来源类型"
                    width="100"
                >
                    <template slot-scope="{ row }">
                        {{ DICT.SOURCETYPE[row.sourceType] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cardSystem"
                    :sortable="true"
                    label="打卡系统"
                    width="112"
                >
                    <template slot-scope="{ row }">
                        {{ DICT.CARDSYSTEM[row.cardSystem] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="site"
                    :sortable="true"
                    label="打卡地点"
                    width="122"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.site }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="siteCode"
                    :sortable="true"
                    label="打卡设备"
                    width="122"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.siteCode }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" title="编辑" v-if="scope.row.sourceType==20"
                                   @click="edit(scope.row)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            v-if="scope.row.sourceType==20"
                            type="text"
                            @click="del(scope.row, scope.$index)"
                            title="删除"
                        >
              <span style="color: red">
                <i class="el-icon-delete red"></i
                ></span>
                        </el-button>
                    </template>
                </el-table-column>
            </v-table>
        </div>
        <v-dialog ref="formDiag" :width="'720px'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
                >保存
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formDiag.hide();
            }
          "
                >取消
                </el-button
                >
            </div>
        </v-dialog>

        <v-dialog
            ref="formFindDiag"
            :appendToBody="true"
            title="查找"
            :width="'48%'"
        >
            <employee-multi-select
                v-model="page.query.param.employeeId"
                :confirmFind="confirmFind"
                :cancelFind="cancelFind"
            >
                <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
                <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
            </employee-multi-select>
        </v-dialog>
        <v-dialog ref="formMakeDiag" :width="'720px'" title="排班">
            <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
                >排 班
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
                >关闭
                </el-button
                >
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
    color: green;
}
</style>

<script>
import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
import ClassMasterSelect from "@/components/widgets/attend/ClassMasterSelect.vue";

import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";

import FormPanel from "./Form";
import MakeFormPanel from "./MakeForm";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

export default {
    components: {
        EmployeeMultiSelect,
        EmployeeSelect,
        ClassMasterSelect,
        PeriodSelect,
        FormPanel,
        MakeFormPanel,
        DepartmentSelect,
    },
    props: {
        fatherMethodShowSub: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
            DICT: {
                STATUS: {
                    10: "草稿",
                    20: "审核中",
                    30: "审核不过",
                    40: "审核不过终止",
                    50: "审核通过",
                },
                SOURCETYPE: {
                    10: "打卡",
                    20: "补卡",
                    30: "倒入",
                    40: "模拟卡",
                },
                CARDSYSTEM: {
                    10: "本系统",
                    20: "钉钉倒入",
                    30: "企业微信",
                    40: "打卡数据同步",
                },
            },
            dateRange: [],
            formStatus: 1,
            summaryMap: {},

            page: {
                query: {
                    orderBys: "departmentId|asc,employeeId|asc,createdAt|desc",
                    param: {
                        name: "",

                        isDeleted: false,
                    },
                },
                getData: this.$api.attend.attend.EmployeeCardService.query,
            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {},

    methods: {
        findEmployee() {
            this.$refs.formFindDiag.show();
        },

        confirmFind(row) {
            this.$refs.formFindDiag.hide();
            this.page.query.param.employeeId = row.id;
            this.search();
        },
        cancelFind() {
            this.$refs.formFindDiag.hide();
        },

        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = _.cloneDeep(this.getSearchParams());
            params.param.parentId = null;
            this.$api.attend.attend.EmployeeCardService.export(params);
        },

        create() {
            this.$refs.formDiag.show({
                departmentId: this.page.query.param.departmentId,
            });
        },
        createMake() {
            this.$refs.formMakeDiag.show({
                departmentId: this.page.query.param.departmentId,
            });
        },
        edit(row) {
            this.$refs.formDiag.show({cardId: row.cardId});
        },

        del(row) {
            this.$confirm("确定删除此记录吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.attend.attend.EmployeeCardService.deleteById(row.cardId).then(
                    (rsp) => {
                        this.search();
                        this.$msgJsonResult(rsp);
                    }
                );
            });
        },

        onMakeFormSaved() {
            this.$refs.formMakeDiag.hide();
            this.$nextTick(this.search);
        },

        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            if (options.cardId) {
                this.cardId = options.cardId;
            }
            this.search();
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["cardDay"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },

        buildDataRanges() {
            if (this.page.query.param.periodId != null) {
                this.$api.attend.attend.PeriodService.findById(
                    this.page.query.param.periodId
                ).then((r) => {
                    //console.log(JSON.stringify(r));
                    if (r.data != null) {
                        this.dateRange = [r.data.startDay, r.data.endDay];
                        this.getSearchParams();
                        //  console.log(JSON.stringify(this.page.query));
                        this.$refs.table.load();
                        return;
                    }
                });
            }
        },
        search() {
            this.getSearchParams();
            //  console.log(JSON.stringify(this.page.query));
            this.$refs.table.load();
            //this.$refs.tablesub.load();
        },
        cancel() {
            this.dateRange = [];

            this.page.query.param = {
                isDeleted: false,
            };
            this.search();
        },

        clickRow(row) {
            this.row = row;
            // console.log(JSON.stringify(row));
            if (this.fatherMethodShowSub) {
                this.fatherMethodShowSub(row);
            }
        },
    },

    created() {
    },
    mounted() {
        this.$on("init", this.init);
    },
};
</script>
